<template>
  <div>
    <!-- 面包屑导航区 -->
	<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>历史风险项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加维护案例</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
	<el-card>
		<div class="box">
			<div class="top">
				<el-tooltip class="item" effect="dark" content="维护案例添加" placement="top-start">
					<el-button>维护案例添加</el-button>
				</el-tooltip>
			</div>
		</div>
	</el-card>
    <el-card>
      <!-- Tab栏 -->
       <el-form
        :model="addsForm"
        :rules="addsFormRules" ref="addsFormRef"
        label-width="100px" >
        <el-tabs :tab-position="'left'">
         
            <el-form-item label="项目名称" prop="title">
              <el-input placeholder="请输入项目名称" v-model="addsForm.title"></el-input>
            </el-form-item>
			<el-form-item label="项目创建者" prop="founder">
			  <el-input placeholder="输入项目创建者" v-model="addsForm.founder"></el-input>
			</el-form-item>
			<el-form-item label="开始日期" prop="stime">
				<el-col :span="6">
					<el-date-picker type="date" placeholder="选择日期" v-model="addsForm.stime" style="width: 100%;"></el-date-picker>
				</el-col>
				<el-col class="line" :span="2"></el-col>
			</el-form-item>
			
			<el-form-item label="结束日期" prop="etime">
				<el-col :span="6">
					<el-date-picker type="date" placeholder="选择日期" v-model="addsForm.etime" style="width: 100%;"></el-date-picker>
				</el-col>
				<el-col class="line" :span="2"></el-col>
			</el-form-item>
         
         <el-form-item label="项目状态" prop="yn">
         	<el-select v-model="addsForm.yn" >
         		<el-option label="未开始" value="未开始" ></el-option>
         		<el-option label="已开始" value="已结束"></el-option>
				<el-option label="已完成" value="已完成"></el-option>
         	</el-select>
         </el-form-item>
			
			
		 </el-form-item>
       
		  <!-- 确认按钮 -->
             <el-button type="primary" class="btnAdd" @click="addMessage" style="background-color: #FF0000;color: #FFFFFF">确认</el-button> 
			<!-- 取消按钮 -->
		     <el-button type="primary" class="btnAdd" @click="Return" style="background-color: #696969;color=#FFFFFF">取消</el-button> 
          </el-tab-pane>
        </el-tabs>
      </el-form> 
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      // 添加学习笔记的表单对象
      addsForm: {
		  id:'',
        title: '',
        founder: '',
		stime: '',
		etime: '',
		yn: '',
		state:0,
		uid: JSON.parse(window.sessionStorage.getItem('user')).id,
      },
      addsFormRules: {
        title: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
		founder: [
		  { required: true, message: '请输入项目创建人', trigger: 'blur' }
		],
		stime: [
		  { required: true, message: '请输入开始时间', trigger: 'blur' }
		],
		etime: [
		  { required: true, message: '请输入结束时间', trigger: 'blur' }
		],
		yn: [
		  { required: true, message: '请输入项目目前状态', trigger: 'blur' }
		],
      },
	  textarea: '',
  }
  },
  created () {
    
  },
  methods: {
    // 添加人员 完成后返回人员管理
    addMessage() {
        this.$refs.addsFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请填写必要的表单项！')
        // 将this.addsForm进行深拷贝
        const forms = _.cloneDeep(this.addsForm) 
		//console.log(forms)
        const { data: spa } = await this.$http.post("addhistorylist", forms)
		//console.log(spa)
		if(spa == "ok"){
			this.$message.success('维护项目添加成功!')
			this.$router.push('/history_list')
		}else{
			this.$message.error('添加失败!')
		}
       
      })
    },
	//页面跳转到空间主页
	async Return(){
		this.$router.push('/history_list')
  },
 },
 }
</script>

<style lang='less' scoped>
      .el-checkbox {
          margin: 0 8px 0 0 !important;
      }
      .previewImg{
          width: 100%;
      }
      .btnAdd{
          margin-top: 15px
      }
</style>